<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:th = "http://www.thymeleaf.org"
      lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet"/>
    <link href="https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css" rel="stylesheet" />

    <!-- PLUGINS CSS STYLE -->
    <link href="assets/plugins/toaster/toastr.min.css" rel="stylesheet" />
    <link href="assets/plugins/nprogress/nprogress.css" rel="stylesheet" />
    <link href="assets/plugins/flag-icons/css/flag-icon.min.css" rel="stylesheet"/>
    <link href="assets/plugins/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
    <link href="assets/plugins/ladda/ladda.min.css" rel="stylesheet" />
    <link href="assets/plugins/select2/css/select2.min.css" rel="stylesheet" />
    <link href="assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
    <!-- SLEEK CSS -->
    <link id="sleek-css" rel="stylesheet" href="assets/css/sleek.css" />

    <!-- FAVICON -->
    <link href="assets/img/favicon.png" rel="shortcut icon" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/assets/plugins/nprogress/nprogress.js"></script>
</head>
<body>
<div th:fragment="info">
    <div class = "bg-white rounded">
        <div class="col-lg-10 col-xl-10">
            <div class="profile-content-left pt-5 pb-3 px-3 px-xl-5">
                <div class="card-img mx-auto rounded-circle" style="text-align: center">
                    <img th:src="${current.avataruri}" alt="user image" style="width: 150px;">
                </div>
                <hr class="w-100">
                <div class="contact-info pt-4" style="text-align: center">
                    <p class="text-dark font-weight-medium pt-4 mb-2" >账号</p>
                    <p th:text = "${current.username}">USERNAME</p>
                    <p class="text-dark font-weight-medium pt-4 mb-2">昵称</p>
                    <p th:if = "${current.name != ''}" th:text = "${current.name}">NICKNAME</p>
                    <p th:if = "${current.name == ''}" th:text = "${current.username}">USERNAME</p>
                    <p class="text-dark font-weight-medium pt-4 mb-2">性别</p>
                    <div th:switch="${current.sex}">
                        <p th:case='m'>男</p>
                        <p th:case='f'>女</p>
                        <p th:case='s'>保密</p>
                    </div>
                    <p class="text-dark font-weight-medium pt-4 mb-2" th:if="${current.id} == ${user.id}">余额</p>
                    <p th:if="${current.id} == ${user.id}">¥ <span th:text = "${current.balance}">BALANCE</span></p>
                    <br>
                </div>
                <div style="text-align: center" th:if="${current.id} == ${user.id}">
                    <div class = "pl-1 pr-1 mb-3" style="display: inline-block">
                        <form th:action = "@{/edit-profile}" method="get">
                            <button type="submit" class="btn btn-primary" style="width: 100px; ">修改信息</button>
                        </form>
                    </div>
                    <div class="pl-1 pr-1 mb-3" style="display: inline-block">
                        <form th:action = "@{/recharge}" method="get">
                            <button type="submit" class="btn btn-primary" style="width: 100px; ">充值</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCn8TFXGg17HAUcNpkwtxxyT9Io9B_NcM" defer></script>
    <script src="/assets/plugins/jquery/jquery.min.js"></script>
    <script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/plugins/toaster/toastr.min.js"></script>
    <script src="/assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
    <script src="/assets/plugins/charts/Chart.min.js"></script>
    <script src="/assets/plugins/ladda/spin.min.js"></script>
    <script src="/assets/plugins/ladda/ladda.min.js"></script>
    <script src="/assets/plugins/jquery-mask-input/jquery.mask.min.js"></script>
    <script src="/assets/plugins/select2/js/select2.min.js"></script>
    <script src="/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
    <script src="/assets/plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
    <script src="/assets/plugins/daterangepicker/moment.min.js"></script>
    <script src="/assets/plugins/daterangepicker/daterangepicker.js"></script>
    <script src="/assets/plugins/jekyll-search.min.js"></script>
    <script src="/assets/js/sleek.js"></script>
    <script src="/assets/js/chart.js"></script>
    <script src="/assets/js/date-range.js"></script>
    <script src="/assets/js/map.js"></script>
    <script src="/assets/js/custom.js"></script>
</body>
</html>
